<template>
	<view class="register">
		<view class="main">
			<view class="notice">
				<uni-notice-bar text="审批中可撤回重新登记" :single="true"/>
			</view>
			<view class="form_detail">
				<uni-forms ref="dataForm" label-width="300rpx" :modelValue="dataForm" :rules="rules" label-position="top">
					<uni-forms-item label="留校原因:" required name="yuanying">
						<view class="form_text">
							今年不回家
						</view>
					</uni-forms-item>
					<uni-forms-item label="计划留校开始时间:" required name="startTime">
						<view class="form_text">
							2024年1月2日 08:30:00
						</view>
					</uni-forms-item>
					<uni-forms-item label="计划留校结束时间:" required name="endTime">
						<view class="form_text">
							2024年1月25日 08:30:00
						</view>
					</uni-forms-item>
					<uni-forms-item label="家庭联系人姓名:" required name="name">
						<view class="form_text">
							张梅林
						</view>
					</uni-forms-item>
					<uni-forms-item label="家庭联系人电话:" required name="phone">
						<view class="form_text">
							15567899900
						</view>
					</uni-forms-item>
					<uni-forms-item label="是否需要校内住宿:" required name="room">
						<view class="form_text">
							15567899900
						</view>
					</uni-forms-item>
					<uni-forms-item label="校外住宿地址:" required name="address">
						<view class="form_text">
							不需要
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="approvalProcess">
				<view class="top">
					<view class="left">
						审批流程
					</view>
					<view v-if="!flag" class="right" @click="handleFlag">
						<text>展开</text><uni-icons type="down" size="16" color="#006DFF"></uni-icons>
					</view>
					<view v-else class="right" @click="handleFlag">
						<text>收起</text><uni-icons type="up" size="16" color="#006DFF"></uni-icons>
					</view>
				</view>
				<view class="bottom" v-if="flag">
					<view class="steps" v-for="(item, index) in list" :key="index">
						<view class="step">
							<view class="yuan"></view>
							<view :class="item.active ? 'line' : 'line1'"></view>
						</view>
						<view class="content">
							<view class="left" :style="`background: ${item.back}; color: ${item.color}`">
								{{item.surname}}
							</view>
							<view class="right">
								<view class="title">
									{{item.title}}
								</view>
								<view class="right_bottom">
									<view class="name">
										{{item.name}}
									</view>
									<view class="flowPath" :style="item.status == 1 ? 'color: #797979' : item.status == 2 ? 'color: #006DFF' : 'color: #FF5300'">
										{{item.flowPath}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="sure" @click="handleSubmit">
				确认登记
			</view>
			<view class="no" @click="handleDisagree">
				不同意登记
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataForm: {},
				list: [{
					title: '发起人(学生)',
					surname: '张',
					flowPath: '已发起',
					name: '张婉悠',
					active: 0,
					back: '#FFD4D4',
					color: '#FE7575',
					status: '1'
				},{
					title: '审批人(导师)',
					surname: '童',
					flowPath: '审批中',
					name: '童锦程',
					active: 1,
					back: '#E2E6FF',
					color: '#6A7CE3',
					status: '2'
				},{
					title: '审批人(辅导员)',
					surname: '张',
					flowPath: '待审批',
					name: '张起灵',
					active: 0,
					back: '#FFEAC2',
					color: '#F8852C',
					status: '3'
				},{
					title: '发起人(学生)',
					surname: '鹿',
					flowPath: '待审批',
					name: '鹿晗',
					active: 0,
					back: '#E2E6FF',
					color: '#6A7CE3',
					status: '3'
				}],
				flag: false,
			}
		},
		methods: {
			handleFlag() {
				this.flag = !this.flag
			},
			handleSubmit() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			handleDisagree() {
				uni.navigateTo({
					url: '/pages/disagree/index'
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.register{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	::v-deep .uni-noticebar {
		text-align: center;
	}
	.main{
		flex: 1;
		overflow: auto;
		flex-grow: 1;
	}
	.form_detail{
		width: 88%;
		padding: 20rpx;
		margin: 0rpx auto 20rpx;
		background: #fff;
		border-radius: 8rpx;
		.form_text{
			color: #797979;
		}
	}
	.approvalProcess {
		width: 88%;
		padding: 20rpx;
		margin: auto;
		background: #fff;
		border-radius: 8rpx;
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				font-size: 28rpx;
				border-left: 10rpx solid #166AFF;
				padding-left: 12rpx;
			}
			.right{
				font-size: 24rpx;
				color: #006DFF;
			}
		}
		.bottom{
			margin: 20rpx 0rpx;
			.steps{
				list-style: none;
				box-sizing: border-box;
				padding-left: 20rpx;
				display: flex;
				.step{
					position: relative;
					.line::before {
						z-index: 1;
						content: "";
						background-color: #0091ff;
						width: 20rpx;
						height: 20rpx;
						color: #fff;
						position: absolute;
						border-radius: 50%;
						left: 0;
						top: 20rpx;
						transform: translate(-50%, -50%);
					}
					
					.line {
						font-size: 16px;
						line-height: 22.5px;
						font-weight: 500;
						color: #20a0ff;
					}
					.line1::before {
						z-index: 1;
						content: "";
						background-color: #ccc;
						width: 20rpx;
						height: 20rpx;
						color: #fff;
						position: absolute;
						border-radius: 50%;
						left: 0;
						top: 20rpx;
						transform: translate(-50%, -50%);
					}
					.line1 {
						font-size: 16px;
						line-height: 22.5px;
						font-weight: 500;
						color: #20a0ff;
					}
					.yuan {
						width: 2px;
						height: 100%;
						background-color: #D9D9D9;
						position: absolute;
						top: 20rpx;
						bottom: 0;
						left: -1px;
					}
				}
			}
			.steps:last-child .step .yuan  {
				display: none;
			}
			.content{
				width: 94%;
				height: 100%;
				background: #FFFFFF;
				box-shadow: 0 1px 6px 2px #7c829224;
				border-radius: 8px;
				padding: 20rpx;
				display: flex;
				align-items: center;
				margin: 20rpx 0rpx 20rpx 40rpx;
				.left{
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 50%;
					margin-right: 32rpx;
				}
				.right{
					.title{
						margin: 6rpx 0rpx;
					}
					.right_bottom{
						margin: 6rpx 0rpx;
						display: flex;
						.name{
							width: 150rpx;
						}
						.flowPath{
						}
					}
				}
			}
		}
	}
	.footer{
		width: 94%;
		height: 200rpx;
		margin: 20rpx auto;
		.sure{
			height: 80rpx;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			background-image: linear-gradient(to right, #6AA9FF, #3C88FF, #156DFF);
		}
		.no{
			height: 80rpx;
			color: #CB000E;
			line-height: 80rpx;
			text-align: center;
			border-radius: 10rpx;
			border: 4rpx solid #FF7C85;
		}
	}
</style>